<!--  -->
<template>
	<div>
		<cu-custom :bgImage="bgImage" :needBack="true" bgColor="bgNormal" topTitle="备案内容" titleClass="commTitleWhite"
			backIconColor="#fff"></cu-custom>
		<view class="content" :style="{ height: scorllContentHeight }">
			<view class="lapel"> {{targetDetail.target}} </view>
			<view class="form_container">
				<u-form :model="form" ref="uForm" id="uForm" label-width="170" :label-style="{
            color: '#666',
          }">


					<view class="form-item">
						<u-form-item label="说明" prop="remark">
							<view>
								{{targetDetail.comment || '暂无'}}
							</view>
						</u-form-item>
					</view>
					<view class="form-item">
						<u-form-item label="备注资料" prop="remark">
							<view>
								{{targetDetail.backUpData || '暂无'}}
							</view>

						</u-form-item>
					</view>
					<view class="form-item">
						<u-form-item label="参考资料" prop="remark">
							<view v-if="targetDetail.files">
								<view class="cankao-list" v-for="item in targetDetail.files" :key="item.id"
									@click="openFile(item)">
									<image class="img" src="@/static/images/workbench/word.png">
									</image>
									<text class="filename"> {{item.original}} </text>
								</view>
							</view>

						</u-form-item>
					</view>
					<view class="form-item">
						<u-form-item label="自评得分" prop="name">
							<view>
								{{recordDetail.selfScore}}
							</view>
						</u-form-item>
					</view>
					<view class="reference_paper_container">
						<view class="reference_paper">
							<!-- <view class="reference_paper_title"> 参考文件 </view> -->
							<view class="reference_paper_documents">
								<text class=""> 填报文件 </text>
								<image class="word" src="@/static/images/workbench/word.png" v-if="targetFile">
								</image>
								<text class="required" @click="openFile(targetFile)" v-if="targetFile"> {{targetFile.original}}</text>
							</view>
							<!-- <view class="reference_paper_photos" v-if="form.imgList && form.imgList.length">
								<view class="pic_delete" v-for="(item, index) in form.imgList" :key="index">
									<image class="pic" :src="item" @click="previewImage"> </image>
								</view>
							</view> -->
						</view>
					</view>
					<view class="opinion_container">
						<view class="opinion">
							<!-- <view class="opinion_title"> 指导意见 </view> -->
							<view class="collapse">
								<view class="collapse_container">
									<text class="title">指导意见</text>
									<view class="" @click="showItem = !showItem">
										<text class="">
											{{ showItem ? "收起" : "展开" }}
										</text>
										<image class="bottom" src="@/static/images/bottom.png">
										</image>
									</view>
								</view>
								<view class="time_line" v-show="showItem">
									<u-time-line>
										<u-time-line-item v-for="(item, index) in messageList" :key="index">
											<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
											<template v-slot:content>
												<view>
													<view v-if="!item.type">
														<view class="first">{{ item.createUserName }}
															{{item.createTime}}</view>
														<view class="second">{{ item.content }}</view>
													</view>
													<view v-if="item.type ==1 || item.type ==2 || item.type==3">
														<view class="first">{{ item.createUserName }}
															{{item.createTime}}</view>
														<view class="second">{{ item.content }}</view>
													</view>

												</view>
											</template>
										</u-time-line-item>
									</u-time-line>
									<view class="reply">
										<u-input v-model="message" placeholder=" " placeholder-style="color:#e0e0e0"
											:custom-style="{
										    color: '#477EF5',
										  }" @confirm="sendMessage" />
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="form-item pr_30">
            <u-form-item
              label="分数"
              prop="score"
              label-position="top"
              required
              :border-bottom="false"
            >
              <u-input
                type="number"
                v-model="form.score"
                placeholder="请输入分数"
                placeholder-style="color:#e0e0e0"
                border
                height="77"
                border-color="#E0E0E0"
              />
            </u-form-item>
            <view class="total_score"> 总分50 </view>
          </view> -->
					<!-- <view class="form-item pr_30">
						<u-form-item label="批注" prop="remark" label-position="top">
							<u-input v-model="form.remark" placeholder="请输入批注" type="textarea"
								placeholder-style="color:#e0e0e0" border height="182" border-color="#E0E0E0" />
						</u-form-item>
					</view> -->
				</u-form>
			</view>
		</view>
		<view class="fix_btn" v-if="isScore == 0 || isScore == ''">
			<button @click="promptModify" hover-class="none">提交修改</button>
			<button @click="confirm" hover-class="none">提交下一级</button>
		</view>
	</div>
</template>

<script>
	import {
		getTargetDetail,
		pleaseModifyRecord,
		getTargetDeclarationRecord,
		getListByRecordId,
		replyMessage,
		shAudit
	} from "@/api/expert.js";
	import {
		getConcatFile
	} from "@/api/workBench.js";
	import { getFileUrl } from "@/utils/common";
	export default {
		data() {
			return {
				keyword: "",
				showItem: false,
				list: [{
						name: "社会组织 2023-02-12 10:50:03",
						name1: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
					},
					{
						name: "社会组织 2023-02-12 10:50:03",
						name1: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
					},
				],
				scorllContentHeight: "",
				form: {
					name: "",
					remark: "",
					score: "",
					imgList: [
						require("@/static/images/shai.png"),
						require("@/static/images/shai.png"),
						require("@/static/images/shai.png"),
					],
				},
				targetDetail: {},
				recordDetail: {},
				messageList: [],
				message: '',
				id: "", // 指标id
				targetDeclarationRecordId: "", // 指标填报记录Id
				isScore: 0,
				targetFile: {}
			};
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id
			this.targetDeclarationRecordId = options.targetDeclarationRecordId
			this.auditStatus = options.auditStatus
			console.log(this.targetDeclarationRecordId)
		},
		onShow() {
			this.getHeight();
			this.getZBDetail()
			this.getRecordDetail()
			this.getFile()
			this.getMessage()
		},
		methods: {
			getHeight() {
				if(this.auditStatus == 1) {
					this.scorllContentHeight = `calc(100vh - ${this.CustomBar}px - 135rpx)`;
				} else {
					this.scorllContentHeight = `calc(100vh - ${this.CustomBar}px)`;
				}
				
			},
			async getFile() {
				let res = await getConcatFile(this.targetDeclarationRecordId)
				if(res.data) {
					this.targetFile = res.data
				}
				console.log(res)
			},

			//发送评论
			async sendMessage() {
				if(!this.message) {
					return false
				}
				let res = await replyMessage({
					targetDeclarationRecordId: this.targetDeclarationRecordId,
					content: this.message
				})

				if(res.data) {
					uni.showToast({
						title: "回复成功",
						icon: "success",
						duration: 2000,
					});
					this.getMessage()
					this.message = ''
				}
			},

			//获取指标详情
			async getZBDetail() {
				let res = await getTargetDetail(this.id)
				this.targetDetail = res.data
			},

			//获取评论列表
			async getMessage() {
				let res = await getListByRecordId({
					targetDeclarationRecordId: this.targetDeclarationRecordId
				})
				this.messageList = res.data
			},

			//获取当前填报记录详情
			async getRecordDetail() {
				let res = await getTargetDeclarationRecord(this.targetDeclarationRecordId)
				this.recordDetail = res.data
			},

			//打开word
			openFile(fileData) {
				// console.log("preview");
				let fileUrl = getFileUrl(fileData) 
				uni.showLoading({
					mask: true,
					title: "文件预览中",
				});
				uni.downloadFile({
					url: fileUrl, //文件地址
					success: function(res) {
						var filePath = res.tempFilePath;
						console.log(res);
						uni.openDocument({
							filePath: filePath,
							showMenu: false, //这个参数可设置你预览的文件能否被直接转发，此次是设置是否展示分享菜单
							success: function(res) {
								// console.log("res==",res)
								uni.hideLoading();
							},
							fail: function(err) {
								// console.log("err==",err)
								uni.showToast({
									title: "预览文件出错,请稍后尝试",
									icon: "none",
								});
								uni.hideLoading();
							},
						});
					},
					fail: function(err) {
						console.log(err);
						uni.hideLoading();
					},
				});
			},
			// 预览图片
			previewImage(current = 0) {
				uni.previewImage({
					current,
					urls: this.form.imgList,
				});
			},
			// 提交修改
			async promptModify() {
				let res = await pleaseModifyRecord({
					targetId: this.targetDeclarationRecordId
				})
				if (res.data) {
					uni.showToast({
						title: '提醒成功',
						icon: "success",
						duration: 2000,
					});
				}

			},
			// 提交下一级
			async confirm() {
				let res = await shAudit({
					id: this.targetDeclarationRecordId
				})
				if(res.data) {
					uni.showToast({
						title: '提交成功',
						icon: "success",
						duration: 2000,
					});
				}
			},
		},
	};
</script>
<style lang='scss' scoped>
	.content {
		overflow-y: scroll;
		color: #333;
		font-size: 28rpx;

		.lapel {
			line-height: 98rpx;
			padding-left: 35rpx;
			background: #fff;
		}

		.form-item {
			padding: 0 0 0 34rpx;
			background: #fff;
		}

		/* ::v-deep {
			.u-input {
				padding-right: 29rpx !important;
				text-align: right;
			}

			.u-dot {
				background: none;
				border: 3rpx solid #5984fb;
				height: 20rpx;
				width: 20rpx;
			}

			.u-time-axis::before {
				border-left-color: #5984fb;
				border-radius: 1rpx;
			}

			.u-border-bottom:after {
				border-bottom-color: #f5f5f5;
			}
		} */

		.opinion_container {
			padding: 44rpx 34rpx 0;
			background: #fff;

			.opinion {
				border-bottom: 2rpx solid #f5f5f5;

				// margin: 0 34rpx;
				.collapse {
					margin-top: 47rpx;
					color: #666;
					padding-bottom: 33rpx;

					.title {
						color: #666;
						font-size: 26rpx;
					}

					.collapse_container {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 26rpx;

						font-size: 24rpx;
						color: #4477f8;
						display: flex;
						align-items: center;

						image {
							width: 26rpx;
							height: 16rpx;
							margin-left: 11rpx;
						}
					}

					.time_line {
						margin-left: 40rpx;
						margin-top: 34rpx;

						.first {
							font-size: 26rpx;
							color: #4d70f8;
						}

						.second {
							font-size: 28rpx;
							color: #999;
							margin: 22rpx 0 33rpx;
						}

						.third {
							font-size: 26rpx;
							color: #4d70f8;
							margin-bottom: 22rpx;
							color: #fea538;
						}

						.fourth {
							font-size: 28rpx;
							color: #999;
						}
					}
				}
			}
		}
	}

	.fix_btn {
		box-shadow: 0rpx 2rpx 15rpx 0rpx rgba(163, 163, 163, 0.35);
		background: #fff;
		height: 135rpx;
		padding: 28rpx;
		position: fixed;
		bottom: 0;
		width: 100vw;
		display: flex;

		button {
			width: 310rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			border-radius: 40rpx;
			background: #fff;
			border: 1rpx solid #4d70f8;
			color: #4d70f8;

			&:last-child {
				background: linear-gradient(90deg, #417ffc, #505eeb);
				box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(22, 121, 253, 0.28);
				color: #fff;
			}
		}
	}

	.form_container {
		margin-top: 18rpx;
	}

	.pr_30 {
		padding-right: 34rpx !important;
		position: relative;

		.total_score {
			position: absolute;
			top: 35rpx;
			left: 200rpx;
			color: #ff0000;
		}
	}

	.reference_paper_container {
		padding: 27rpx 0 0 34rpx;
		background: #fff;

		.reference_paper {
			border-bottom: 2rpx solid #f5f5f5;
			padding-bottom: 30rpx;

			.reference_paper_documents {
				// margin-top: 48rpx;
				display: flex;
				align-items: center;

				text:first-child {
					color: #666;
				}

				text:last-child {
					font-size: 26rpx;
					margin-left: 9rpx;
				}

				.word {
					margin-left: 61rpx;
					margin-right: 13rpx;
				}

				// .required {
				//   font-weight: 500;
				// }
				.tp {
					margin-left: 47rpx;
					margin-right: 8rpx;
				}

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.reference_paper_photos {
				display: flex;
				flex-wrap: wrap;
				margin-top: 54rpx;
				padding-left: 172rpx;

				.pic_delete {
					position: relative;
					margin-right: 30rpx;

					.pic {
						width: 150rpx;
						height: 150rpx;
						border-radius: 4rpx;
					}

					.delete {
						position: absolute;
						top: -17rpx;
						right: -17rpx;
						width: 34rpx;
						height: 34rpx;
					}
				}

				.photo {
					padding: 49rpx 47rpx 60rpx 48rpx;
					background: #edf3ff;

					.camera {
						width: 55rpx;
						height: 41rpx;
						border-radius: 4rpx;
					}
				}
			}
		}
	}

	.opinion_title {
		color: #666;
	}

	.cankao-list {
		display: flex;
		align-items: center;

		.img {
			width: 30rpx;
			height: 30rpx;
		}

		.filename {
			width: 500rpx;
		}
	}

	::v-deep .u-form-item__body {
		align-items: flex-start;
	}

	.reply {
		border: 1px solid #b9b6b6;
		padding: 0 20rpx;
	}
</style>